<script setup lang="ts">
import { reactive, ref } from 'vue';
// 导入库
import { FormInstance } from 'element-plus';
import { InternalRuleItem, Value } from "async-validator";
// 引入 vue router
import { useRouter } from "vue-router";
import * as userservice from '@/assets/api/userservice_0_0_1';

// 构建 router 对象
const router = useRouter()

// 表格引用对象
const formRef = ref<FormInstance>();

// 定义获取 form 变量的 model 
const formModel = reactive<{
  account: string // 账户
  password: string // 密码
  repassword: string  // 重复密码
  rememberPassword: boolean // 是否记住密码
}>({
  account: "",
  password: "",
  repassword: "",
  rememberPassword: false
});

// 提交表单
const onSubmit = async () => {
  // 对输入参数进行验证
  const validate = await formRef.value.validate();
  if (!validate) {
    return;
  }
  //const res = await userservice.GetRememberAccount();
  const res1 = await userservice.Login({
    username: formModel.account,
    password: formModel.password,
    remember: false,
  });
  router.push("/newpage")
  console.log(formModel)
};


const Register = () => {
  router.push("/register");
};

// 校验密码长度
// 自定义表单规则器的写入都是固定的
//  value 值就是输入框对应的值，都是为字符串
const passwordLengthValidator = (rule: InternalRuleItem, value: Value, callback: (error?: string | Error) => void) => {
  if (value.length >= 6) {
    // 负责规则，直接调用 callback
    callback();
  } else {
    // 不符合规则，通过 new Error 返回错误
    callback(new Error("密码长度不能小于 6"));
  }
};
</script>
<template>
  <!-- ref 获取 form 的对象 -->
  <!-- :model 设置到 el-form -->
  <div class="new-page">
    <div class="login-panel">
      <div class="login-title">用户登录</div>
      <div class="form-wrapper">
        <el-form ref="formRef" :model="formModel">
          <!-- form 表单的成员 -->
          <!-- label 标签名 prop 要和 formModel 中的变量一致， rules 校验规则 -->
          <el-form-item prop="account" :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]">
            <el-input v-model="formModel.account" placeholder="请输入用户名/手机号" />
          </el-form-item>
          <!-- 在 rules 中使用自定义的验证器 -->
          <el-form-item prop="password" :rules="[
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { required: true, validator: passwordLengthValidator, trigger: 'blur' }
          ]">
            <!-- type 设置为密码类型 -->
            <el-input type="password" v-model="formModel.password" placeholder="请输入密码" />
          </el-form-item>
          <!-- 设置为水平方向的弹性布局 -->
          <el-form-item class="horzontal-layout">
            <!-- span 元素占满当前空间 -->
            <span class="flex-1" />
            <el-button type="primary" class="btn" @click="onSubmit" ize="large">登录</el-button>
            <el-link type="warning" class="color" @click="Register">没有账号？去注册</el-link>
          </el-form-item>
          <el-checkbox class="color" label="记住密码" v-model="formModel.rememberPassword" />
        </el-form>
      </div>
    </div>
  </div>
  <router-view />
</template>
<style lang="scss" scoped>
.new-page {
  // 设置为绝对定位
  position: absolute;
  // 距离 左边距、右边距、上边距、下边距 都为 0，目标是要让当前页面铺满窗口
  // left: 0;
  // right: 0;
  // top: 0;
  // bottom: 0;
  width: 100%;
  height: 100%;
  // 设置背景图片
  background-image: url('@/assets/img/183e185516454bd93b46ae1c929f87fc--1952616321.png');
  // 然后图片铺满窗口
  background-size: cover;
  background-position: center;
  // 背景图片不随页面滚动而滚动
  background-attachment: fixed;
}
  .login-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 25px;
    width: 26%;
    min-width: 460px;
    height: 30%;
    min-height: 300px;
    background: rgba(100, 94, 110, 0.6);
    border-radius: 5%;
    box-shadow: 2px 2px 10px #ddd;
  }
    .login-title {
      font-size: 22px;
      text-align: center;
      margin-bottom: 22px;
      color: white;
    }


  .btn {
    transform: translate(-65px);
    width: 80px;
    height: 40px;
    font-size: 15px;
  }
  .color{
      color: yellow;
      font-size: 12px;
  }


</style>
